<template>
  <div id="right">


    <div class="top"><div class="title">
      <title-bar>
        <template #img><img src="../../assets/images/监控.png" alt="" class="img" /></template><template #header>实时状态监控</template><template #subhead>State monitoring</template>
      </title-bar>
    </div>
      <div class="container"><Top></Top></div>
    </div>


    <div class="center"><div class="title">
      <title-bar>
        <template #img><img src="../../assets/images/比例.png" alt="" class="img" /></template> <template #header>运单状态</template><template #subhead>Waybill state</template>
      </title-bar>
    </div>
      <div class="container"><waybillState></waybillState> </div>
    </div>


    <div class="bottom"><div class="title">
      <title-bar>
        <template #img><img src="../../assets/images/城市.png" alt="" class="img" /></template> <template #header>合作伙伴</template><template #subhead>Cooperation partner</template>
      </title-bar>
    </div><mainCities></mainCities></div>


  </div>
</template>

<script setup lang="ts">
import mainCities from "./mainCities.vue";
import Top from "./monitor.vue"
import waybillState from "./waybillState.vue"
import titleBar from "../scatteredContainer/titleBar.vue";
</script>

<style scoped lang="scss">
#right {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  .center,.bottom{
    flex: 4;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .top{
    flex: 3;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
}

.title {
  height: 40px;
}

.container {
  flex: 1;
}
</style>